<script lang="ts" setup>
import { onMounted } from 'vue';
import { showLoading, navigateTo } from '@tarojs/taro';
import {
  SYS_REGION_BY_AREA_UNIT_AND_AREA_FLOOR,
  // GET_AREA_ROOM_BY_FLOOR,
} from '/@/api/modules/base/sys-region';
import { state } from './state';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
onMounted(() => {
  //查询几楼
  showLoading();
  SYS_REGION_BY_AREA_UNIT_AND_AREA_FLOOR({ comQuery: { page: 1, pageSize: 10000 } }).then((res) => {
    state.list = res.content;
    state.activeUnitId = state.list[0].id || '';
  });
});
</script>

<template>
  <view class="device-control-type app-page--1">
    <app-navbar title="远程控制" />

    <nut-tabs
      class="app-page__wrapper app-page__wrapper--1"
      v-model="state.activeUnitId"
      title-scroll
      direction="vertical"
      size="small"
    >
      <!-- 几楼-->
      <nut-tab-pane
        v-for="item in state.list"
        :key="item.id"
        :title="item.name"
        :pane-key="item.id"
      >
        <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
          <view class="device-control-type__wrapper">
            <nut-grid column-num="2" :gutter="10" class="device-control-type__grid" :border="false">
              <!-- xx楼层 -->
              <nut-grid-item v-for="floorItem in item.children" :key="floorItem.id">
                <view
                  class="device-control-type-item"
                  @click="
                    navigateTo({
                      url: `/pages/device-control/list/index?areaId=${floorItem.id}&areaName=${floorItem.name}`,
                    })
                  "
                >
                  <view class="device-control-type-item--center">
                    <text>{{ floorItem.name }}</text>
                  </view>
                  <view class="device-control-type-item--right">
                    <app-nut-icon-right />
                  </view>
                </view>
              </nut-grid-item>
            </nut-grid>

            <view class="app-page__list-tips">
              <text v-if="!item.children || !item.children.length"> 暂无数据! </text>
            </view>
          </view>
        </scroll-view>
      </nut-tab-pane>
    </nut-tabs>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
